<template>
  <div class="PrevPolicy">
    <h3 class="title">疫情期间出行防疫政策</h3>
    <Cascader :options="options" label="出发城市" @onValue="getgoCity"/>
    <Cascader :options="options" label="到达城市" @onValue="getonCity"/>
    <van-button type="primary" block @click="toPrevPolicyView">查看政策</van-button>
  </div>
</template>

<script>
import axios from "axios";
import Cascader from "@/components/Cascader";
export default {
  name: "PrevPolicy",
  components: {
    Cascader
  },
  data() {
    return {
      show: false,
      goCity: "", //出发城市
      noCity: "", //达到城市
      cascaderValue: "",
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [],
      citys: []
    };
  },
  mounted() {
      //   获取城市列表数据 此接口每天只能请求100次
      this.getData()
      // 获取城市列表数据 此接口是需要启动本地的server文件下的index.js文件 cd到server文件夹下 执行启动命令 node index
      // this.getMockData()
  },
  methods: {
    getgoCity(data) {
      console.log(data);
      this.citys.push(data);
    },
    getonCity(data) {
      console.log(data);
      this.citys.push(data);
    },
    toPrevPolicyView() {
      if (this.citys.length == 2) {
        this.$router.push({ name: "Policy", params: { citys: this.citys } });
      } else {
        this.$notify({ type: "warning", message: "请选择城市" });
      }
    },
    getData() {
      //   获取城市列表数据
      axios
        .get(
          `http://iwenwiki.com/wapicovid19/citys.php?key=171e165a7d991c5f6ecd5194c54778ef`
        )
        .then(res => {
          console.log(res.data);
          if (res.status === 200) {
            var currentAll = [];
            for (var i = 0; i < res.data.result.length; i++) {
              var childArr = [];
              for (var j = 0; j < res.data.result[i].citys.length; j++) {
                var temp2 = {
                  text: res.data.result[i].citys[j].city,
                  value: res.data.result[i].citys[j].city_id
                };
                childArr.push(temp2);
              }
              var temp1 = {
                text: res.data.result[i].province,
                value: res.data.result[i].province_id,
                children: childArr
              };
              currentAll.push(temp1);
            }
            this.options = currentAll;
          } else {
          }
        });
    },
    getMockData() {
      axios.get("http://172.16.20.10/api/city").then(res => {
        console.log(res);
        if (res.status === 200) {
          var currentAll = [];
          for (var i = 0; i < res.data.result.length; i++) {
            var childArr = [];
            for (var j = 0; j < res.data.result[i].citys.length; j++) {
              var temp2 = {
                text: res.data.result[i].citys[j].city,
                value: res.data.result[i].citys[j].city_id
              };
              childArr.push(temp2);
            }
            var temp1 = {
              text: res.data.result[i].province,
              value: res.data.result[i].province_id,
              children: childArr
            };
            currentAll.push(temp1);
          }
          this.options = currentAll;
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.PrevPolicy {
  position: relative;
  width: 100%;
  height: 150px;
  background: #fff;
  box-sizing: border-box;
  padding: 10px;
  .title {
    font-size: 0.16rem;
  }
}
</style>
